<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--搜索-->
    <el-form :inline="true" :model="studentvo" class="demo-form-inline">
        <el-form-item label="学生姓名">
            <el-input v-model="studentvo.ename" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="studentvo.startDate" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="studentvo.endDate" style="width: 100%;"></el-date-picker>
        </el-form-item>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable">查询</el-button>
        </el-form-item>
    </el-form>




    <!--表格-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="smpno"
                label="id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sdate"
                label="地址"
                width="180">
        </el-table-column>

        <el-table-column
                prop="sno"
                label="班级"
                width="180">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="success" size="small" icon="el-icon-edit" @click="editEmp(scope.row)" >编辑</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteone(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--修改-->


    <el-dialog
            title="修改员工"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form ref="form" :model="editEmpForm" label-width="80px" >
            <el-form-item label="学生id">
                <el-input v-model="editEmpForm.smpno"></el-input>
            </el-form-item>
            <el-form-item label="学生名字">
                <el-input v-model="editEmpForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="入学时间">
                <el-input v-model="editEmpForm.sdate"></el-input>
            </el-form-item>
            <el-form-item label="班级">
                <el-select v-model="value" placeholder="请选择">
                    <el-option>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary">确认修改</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>


<!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">

</body>

<script>
    var app=new Vue({
        el: "#app",
        data:{
            tableData: [],
            empVo: {},
            currentPage:1,
            pageSize:5,
            total:0,
            studentvo:{},
            //编辑
            dialogVisible:false,
            editEmpForm:{},
        },
        created(){
            this.initTable()
        },
        methods:{
            initTable(){
                axios.post("http://localhost:8080/student/mn/"+this.currentPage+"/"+this.pageSize,this.studentvo).then(result=>{
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total
                    /*console.log(this.total)
                    console.log(this.stude)*/

                })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable()

            },
            handleCurrentChange(val) {
                this.currentPage=val;
                    this.initTable()
            },
            deleteone(row){
                let mn=row.smpno;
                axios.delete("http://localhost:8080/student/delete/"+mn).then(result=>{
                    if (result.data.code==200){
                        this.$message.success("删除成功");
                        this.initTable()
                    }
                    //console.log(result.data.code)

                })
            },

            editEmp(row){
                this.dialogVisible=true;
                this.editEmpForm=row;

            }
        }
    })
</script>
</html>